import React from 'react';
import styles from './EmotionView.scss';

import initView from '@/cross/components/View';
const View = initView(styles);
import initText from '@/cross/components/Text';
const Text = initText(styles);
import initImage from '@/cross/components/Image';
const Image = initImage(styles);
import initScrollView from '@/cross/components/ScrollView';
const ScrollView = initScrollView(styles);

import { EmotionData } from './data';

/**
 * 表情
 */
export interface IEmotionItem {
  title: string;
  code: string;
  img: string;
}

interface EmotionViewProps {
  onSelect?: (item: IEmotionItem) => void;
}
export const EmotionView = React.memo(({ onSelect }: EmotionViewProps) => {
  const onClick = (item: IEmotionItem) => {
    onSelect && onSelect(item);
  };

  return (
    <ScrollView>
      <View className="emotion-view M-flexbox-horizontal M-flex-flow-row-wrap">
        {EmotionData.map((item, index) => {
          return (
            <View
              onClick={() => onClick(item)}
              key={index}
              className="emotion-view__item M-center-all M-gb-click"
            >
              <Image className="emotion-view__item__image" src={item.img} />
            </View>
          );
        })}
      </View>
    </ScrollView>
  );
});

export default EmotionView;
